<template>
  <div class="feeds-container">
    <Waterfall
      :list="list"
      :width="230"
      :hasAroundGutter="false"
      :animationDelay="0"
      :animationEffect="''"
      :animationDuration="0"
      style="max-width: 1260px"
    >
      <template #default="{ item }">
        <div class="card animate__animated animate__bounceIn">
          <el-image
            @click="toMain(item.productId)"
            style="border-radius: 10px; width: 230px; height: 157px; cursor: pointer"
            :src="item.imgUrl"
            fit="cover"
          ></el-image>
          <div class="footer">
            <a class="title"
              ><span>{{ item.title }}</span></a
            >
            <div style="display: flex; justify-content: space-between; margin-bottom: 5px">
              <span v-if="activeTab !== 'publish' && activeTab !== 'collect'" style="font-size: 12px; color: #9e9e9e"
                >收货方式：{{ item.postMode }}</span
              >
              <span
                v-if="activeTab !== 'publish' && activeTab !== 'collect'"
                style="font-size: 12px; color: #3a64ff; cursor: pointer"
                @click="toOrder(item)"
                >查看订单</span
              >
              <span v-if="activeTab === 'publish' || activeTab === 'collect'" style="font-size: 12px; color: #9e9e9e"
                >收货方式：{{ item.postType === 0 ? '邮寄' : '用户自提' }}</span
              >
              <span
                v-if="activeTab === 'publish' && (item.status === 1 || item.status === 2)"
                style="font-size: 12px; color: #3a64ff; cursor: pointer"
                @click="del(item)"
                >删除</span
              >
              <span
                v-if="activeTab === 'publish' && item.status === 9"
                style="font-size: 12px; color: #3a64ff; cursor: pointer"
                @click="disable(item)"
                >下架</span
              >
            </div>
            <div class="price">
              <span style="color: red">￥{{ toPrice(item.price) }}</span>
              <span
                style="
                  margin-left: 5px;
                  font-size: 11px;
                  color: #9e9e9e;
                  font-weight: normal;
                  text-decoration: line-through;
                "
                >￥{{ toPrice(item.originalPrice) }}</span
              >
              <el-tag
                type="warning"
                size="small"
                v-if="activeTab === 'publish' && item.status === 1"
                style="font-size: 12px; color: #e6a23c; margin-left: 10px"
                >审核中</el-tag
              >
              <el-tag
                type="danger"
                size="small"
                v-if="activeTab === 'publish' && item.status === 2"
                style="font-size: 12px; color: #f56c6c; margin-left: 10px"
                >审核失败</el-tag
              >
              <el-tag
                type="success"
                size="small"
                v-if="activeTab === 'publish' && item.status === 9"
                style="font-size: 12px; color: #67c23a; margin-left: 10px"
                >上线</el-tag
              >
              <el-tag
                type="info"
                size="small"
                v-if="activeTab === 'publish' && item.status === 12"
                style="font-size: 12px; color: #e6a23c; margin-left: 10px"
                >已卖出</el-tag
              >
            </div>
            <div
              v-if="activeTab === 'purchase'"
              style="display: flex; justify-content: flex-end; font-size: 15px; margin-top: 5px"
            >
              <button v-if="item.dealStatus === 1" class="publishBtn" type="submit">
                <span class="btn-content">订单失败</span>
              </button>
              <button @click="toEvaluate(item)" v-if="item.dealStatus === 9" class="publishBtn" type="submit">
                <span class="btn-content">去评价</span>
              </button>
              <button v-if="item.dealStatus === 11" class="publishBtn" type="submit">
                <span class="btn-content">评价完成</span>
              </button>
              <button v-if="item.dealStatus === 3 && item.postMode === '物流发货'" class="publishBtn" type="submit">
                <span class="btn-content">待发货</span>
              </button>
              <button v-if="item.dealStatus === 3 && item.postMode === '用户自提'" class="publishBtn" type="submit">
                <span class="btn-content">待上传提货地址</span>
              </button>
              <button
                @click="toPay(item)"
                v-if="item.dealStatus === 0 || item.dealStatus === 2"
                class="publishBtn"
                type="submit"
              >
                <span class="btn-content">待付款</span>
              </button>
              <button
                @click="confirmSelf(item)"
                v-if="item.dealStatus === 4 && item.postMode === '用户自提'"
                class="publishBtn"
                type="submit"
              >
                <span class="btn-content">确认提货：{{ item.postSelfCode }} </span>
              </button>
              <button
                @click="confirmPost(item)"
                v-if="item.dealStatus === 4 && item.postMode === '物流发货'"
                class="publishBtn"
                type="submit"
              >
                <span class="btn-content">确认收货</span>
              </button>
            </div>
            <div
              v-if="activeTab === 'sell'"
              style="display: flex; justify-content: flex-end; font-size: 15px; margin-top: 5px"
            >
              <button v-if="item.dealStatus === 0 || item.dealStatus === 2" class="publishBtn" type="submit">
                <span class="btn-content">待付款</span>
              </button>
              <button v-if="item.dealStatus === 1" class="publishBtn" type="submit">
                <span class="btn-content">订单失败</span>
              </button>
              <button v-if="item.dealStatus === 9" class="publishBtn" type="submit">
                <span class="btn-content">交易成功</span>
              </button>
              <button v-if="item.dealStatus === 11" class="publishBtn" type="submit">
                <span class="btn-content">交易成功</span>
              </button>
              <button v-if="item.dealStatus === 4 && item.postMode === '物流发货'" class="publishBtn" type="submit">
                <span class="btn-content">待收货</span>
              </button>
              <button v-if="item.dealStatus === 4 && item.postMode === '用户自提'" class="publishBtn" type="submit">
                <span class="btn-content">待提货: {{ item.postSelfCode }}</span>
              </button>
              <button
                @click="post(item)"
                v-if="item.dealStatus === 3 && item.postMode === '物流发货'"
                class="publishBtn"
                type="submit"
              >
                <span class="btn-content">去发货</span>
              </button>
              <button
                @click="post(item)"
                v-if="item.dealStatus === 3 && item.postMode === '用户自提'"
                class="publishBtn"
                type="submit"
              >
                <span class="btn-content">上传提货地址</span>
              </button>
            </div>
          </div>
        </div>
      </template>
    </Waterfall>
    <Main @main_close="closeMain" v-if="mainShow" :productId="productId"></Main>
    <!--抽屉 用户编辑-->
    <div>
      <el-drawer
        destroy-on-close
        @close-drawer="closeDrawer"
        :show-close="false"
        :size="'400px'"
        v-model="drawer"
        direction="rtl"
      >
        <!-- <post_edit @close-drawer="closeDrawer" :productOrderId="productOrderId" :type="type"></post_edit> -->
      </el-drawer>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { Waterfall } from 'vue-waterfall-plugin-next';
import 'vue-waterfall-plugin-next/dist/style.css';
import { ElNotification } from 'element-plus';
import type { ProductInfo } from '@/types';
import Main from '../Main.vue';
import { onMounted, ref, watch } from 'vue';
import { toPrice } from '@/utils/convert';
import { getCollectProduct, getMyProductList } from '@/api/product';
import { getMyBuyProductOrder, getMySellProductOrder } from '@/api/productOrder';
const list = ref<ProductInfo[]>([]);
const drawer = ref(false);
const productId = ref('');
const productOrderId = ref('');
const mainShow = ref(false);
const toMain = (id: string) => {
  mainShow.value = true;
  productId.value = id;
};

const toOrder = (item: any) => {};
const del = (item: any) => {};
const disable = (item: any) => {};
const activeTab = defineModel<string>('activeTab');
const toEvaluate = (item: any) => {};
const toPay = (item: any) => {};
const confirmSelf = (item: any) => {};
const confirmPost = (item: any) => {};
const post = (item: any) => {};
const closeMain = () => {
  mainShow.value = false;
};
const getList = () => {
  list.value = [];
  if (activeTab.value === 'publish') {
    getPublish();
  } else if (activeTab.value === 'sell') {
    getSell();
  } else if (activeTab.value === 'purchase') {
    getPurchase();
  } else {
    getCollect();
  }
};
const getPublish = () => {
  getMyProductList().then((res) => {
    list.value = res.result as ProductInfo[];
    console.log(res);

    list.value.forEach((item) => {
      if (item.image) {
        try {
          // 检查 item.image 是否已经是数组
          if (typeof item.image === 'string') {
            // 如果是字符串，则需要解析
            const imageArray = JSON.parse(item.image) as string[];
            item.image = imageArray;
            item.imgUrl = imageArray[0]; // 取解析后数组的第一项
          } else if (Array.isArray(item.image)) {
            // 如果已经是数组，直接取第一项
            item.imgUrl = item.image[0];
          }
          console.log('Processed image:', item.image);
        } catch (e) {
          console.error('Error processing image:', e);
          item.image = [];
          item.imgUrl = ''; // 解析失败时设置默认值
        }
      }
      item.productId = item.id;
    });
  });
};

const getSell = () => {
  getMySellProductOrder().then((res) => {
    list.value = res.result as ProductInfo[];
    list.value.forEach((item) => {
      if (item.productImg) {
        try {
          // 检查 item.image 是否已经是数组
          if (typeof item.productImg === 'string') {
            // 如果是字符串，则需要解析
            const imageArray = JSON.parse(item.productImg) as string[];
            item.productImg = imageArray;
            item.imgUrl = imageArray[0]; // 取解析后数组的第一项
          } else if (Array.isArray(item.image)) {
            // 如果已经是数组，直接取第一项
            item.imgUrl = item.productImg[0];
          }
          console.log('Processed image:', item.image);
        } catch (e) {
          console.error('Error processing image:', e);
          item.productImg = [];
          item.imgUrl = ''; // 解析失败时设置默认值
        }
      }

      item.originalPrice = item.productPrice;
      item.title = item.productTitle;
      item.price = item.buyMoneyAll;
    });
  });
};
const getPurchase = () => {
  getMyBuyProductOrder().then((res) => {
    list.value = res.result as ProductInfo[];
    list.value.forEach((item) => {
      if (item.productImg) {
        try {
          // 检查 item.image 是否已经是数组
          if (typeof item.productImg === 'string') {
            // 如果是字符串，则需要解析
            const imageArray = JSON.parse(item.productImg) as string[];
            item.productImg = imageArray;
            item.imgUrl = imageArray[0]; // 取解析后数组的第一项
          } else if (Array.isArray(item.image)) {
            // 如果已经是数组，直接取第一项
            item.imgUrl = item.productImg[0];
          }
          console.log('Processed image:', item.image);
        } catch (e) {
          console.error('Error processing image:', e);
          item.productImg = [];
          item.imgUrl = ''; // 解析失败时设置默认值
        }
      }

      item.originalPrice = item.productPrice;
      item.title = item.productTitle;
      item.price = item.buyMoneyAll;
    });
  });
};
watch( () => activeTab.value,(newVal) => {
    getList(); 
  },
);
const getCollect = () => {
  getCollectProduct().then((res) => {
    list.value = res.result as ProductInfo[];
    list.value.forEach((item) => {
      if (item.image) {
        try {
          // 检查 item.image 是否已经是数组
          if (typeof item.image === 'string') {
            // 如果是字符串，则需要解析
            const imageArray = JSON.parse(item.image) as string[];
            item.image = imageArray;
            item.imgUrl = imageArray[0]; // 取解析后数组的第一项
          } else if (Array.isArray(item.image)) {
            // 如果已经是数组，直接取第一项
            item.imgUrl = item.image[0];
          }
          console.log('Processed image:', item.image);
        } catch (e) {
          console.error('Error processing image:', e);
          item.image = [];
          item.imgUrl = ''; // 解析失败时设置默认值
        }
      }
      item.productId = item.id;
    });
  });


};
const closeDrawer = () => {
  drawer.value = false;
  getList();
};

onMounted(() => {
  getList();
});
</script>

<style lang="less" scoped>
.animate__animated {
  animation-duration: 2s; //动画持续时间
  //animation-delay: 0.5s !important; //动画延迟时间
  //animation-iteration-count: 2 !important;
}
.feeds-container {
  position: relative;
  transition: width 0.5s;
  margin: 0 auto;

  .card {
    position: relative;

    background-color: #f7f7f7;
    border-radius: 8px;
  }

  .noteImg {
    width: 240px;
    max-height: 300px;
    object-fit: cover;
    border-radius: 8px;
  }

  .footer {
    padding: 12px;

    button {
      padding: 5px;
      height: 25px;
      font-size: 12px;
    }

    .publishBtn {
      background-color: #3a64ff;
      color: #fff;
      border-radius: 4px;
      cursor: pointer;
    }

    .title {
      margin-bottom: 8px;
      word-break: break-all;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      font-weight: 500;
      font-size: 14px;
      line-height: 140%;
      color: #333;
    }

    .author-wrapper {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 20px;
      color: rgba(51, 51, 51, 0.8);
      font-size: 12px;
      transition: color 1s;

      .author {
        display: flex;
        align-items: center;
        color: inherit;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin-right: 12px;

        .author-avatar {
          margin-right: 6px;
          width: 20px;
          height: 20px;
          border-radius: 20px;
          border: 1px solid rgba(0, 0, 0, 0.08);
          flex-shrink: 0;
          object-fit: cover;
        }

        .name {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }

      .like-wrapper {
        position: relative;
        display: flex;
        align-items: center;

        .count {
          margin-left: 2px;
        }
      }
    }
  }
}
</style>
